<template>
    <div>
        <ul>
            <li v-for="student in students" :key="student.id">
                {{ student.id }}.{{ student.name }}-{{ student.age }}-{{ student.gender }}
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

let students = ref([]);
// 模拟后端数据获取
onMounted(() => {
    students.value = [
        { id: 1, name: '张三', age: 22, gender: '男' },
        { id: 2, name: '李四', age: 33, gender: '男' },
        { id: 3, name: '王二', age: 34, gender: '女' }
    ];
});
</script>

<!-- <script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        let students = ref([]);
        // 模拟后端数据获取
        onMounted(() => {
            students.value = [
                { id: 1, name: '张三', age: 22, gender: '男' },
                { id: 2, name: '李四', age: 33, gender: '男' },
                { id: 3, name: '王二', age: 34, gender: '女' }
            ];
        });
        return { students };
    }
}
</script> -->
